<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <p style="font-size: 40px;font-family: 华文中宋;text-align: center">皖派商城产品报表</p>
    <el-row>
      <el-col :span="12">
        <p style="font-size: 30px;font-family: 华文中宋;text-align: center">柱形图</p>
        <div style="margin: 0 auto" id="myHistogramChart" :style="{width: '100%px',height: '600px'}"></div>
      </el-col>
      <el-col :span="12">
        <p style="font-size: 30px;font-family: 华文中宋;text-align: center">饼图</p>
        <div style="margin: 0 auto" id="myPieChart" :style="{width: '100%',height: '600px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 柱形图
    drawHistogram() {             //绘制图表方法
      this.myChart = this.$echarts.init(
          document.getElementById("myHistogramChart")
      );
      //将图表配置项赋给图表,true参数表示不和之前的数据合并
      this.myChart.setOption({
        xAxis: {
          data: []
        },
        tooltip: {},
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [],
            itemStyle: {
              color: '#106cc7',
              barBorderRadius: 5,/*圆角半径*/
              borderWidth: 1,/*柱条宽度*/
              borderType: 'solid',/*柱条样式*/
            },
            /*柱宽度*/
            barWidth: '60%',
          }
        ],
      });
      // 查询横轴坐标
      let urlToBrandName = this.GLOBAL.productUrl + 'spu/selectBrandName';
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwtToUser')
            }
          }).get(urlToBrandName).then((response)=>{
        let responseBody = response.data;
        if (responseBody.state == 20000){
          this.myChart.setOption({
            xAxis: {
              data: responseBody.data
            },
          })
        }
      });
      // 查询纵轴数据
      let urlToSales = this.GLOBAL.productUrl + 'spu/selectSales';
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('jwtToUser')
            }
          }).get(urlToSales).then((response)=>{
        let responseBody = response.data;
        if (responseBody.state == 20000){
          this.myChart.setOption({
            series: [
              {
                data: responseBody.data
              }
            ]
          })
        }
      })
    },
    // 饼图
    drawPie(){
      this.myChart1 = this.$echarts.init(
          document.getElementById("myPieChart")
      );
      this.myChart1.setOption({
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '直接访问'
              },
              {
                value: 234,
                name: '联盟广告'
              },
              {
                value: 1548,
                name: '搜索引擎'
              }
            ]
          }
        ]
      });
    }
  },
  mounted() {
    this.drawHistogram();
    this.drawPie();
  },
};
</script>
